<template>
	<view class="container">
		<view class="banner">
			<scroll-view scroll-x class="navscroll">
				<block v-for="(item, index) in silde" :key="index">
					<view class="item" @click="onServer(item.id)">
						<image style="width: 68rpx;height: 68rpx;margin:0 10rpx 0 10rpx;"
							:src="item.image??'/static/images/icon1.png'"></image>
						<view>{{item.name}}</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="search">
			<view :class="'search-item '+(search_index==0?'active':'')" @click="onsearch(0)">
				距离最近
			</view>
			<view :class="'search-item '+(search_index==1?'active':'')" @click="onsearch(1)">
				从业最长
			</view>
			<view :class="'search-item '+(search_index==2?'active':'')" @click="onsearch(2)">
				成交最高
			</view>
			<view :class="'search-item '+(search_index==3?'active':'')" @click="onsearch2(3)">
				<text> 高级筛选</text>
			</view>
		</view>
		<view class="panelMask" v-if="topicStatu" @click.stop.prevent="moveHandle"></view>
		<view class="condition-panel " v-if="topicStatu">
			<view class="search" style="border-bottom: 2rpx solid rgb(240, 240, 240);">
				<view :class="'search-item '+(search_index==0?'active':'')" @click="onsearch(0)">
					距离最近
				</view>
				<view :class="'search-item '+(search_index==1?'active':'')" @click="onsearch(1)">
					从业最长
				</view>
				<view :class="'search-item '+(search_index==2?'active':'')" @click="onsearch(2)">
					成交最高
				</view>
				<view :class="'search-item '+(search_index==3?'active':'')" @click="onsearch2(3)">
					<text> 高级筛选</text>
				</view>
			</view>
			<view class="filter">
				<view class="item">
					<view class="name">性别</view>
					<view :class="'select '+ (sex.index==0?'active':'')" @click="selectsex(0)">不限</view>
					<view :class="'select '+ (sex.index==1?'active':'')" @click="selectsex(1)">男</view>
					<view :class="'select '+ (sex.index==2?'active':'')" @click="selectsex(2)">女</view>
				</view>
				<view class="item">
					<view class="name">年龄</view>
					<view :class="'select '+ (year.index==0?'active':'')" @click="selectyear(0)">不限</view>
					<view :class="'select '+ (year.index==1?'active':'')" @click="selectyear(1)">25以下</view>
					<view :class="'select '+ (year.index==2?'active':'')" @click="selectyear(2)">25-35</view>
					<view :class="'select '+ (year.index==3?'active':'')" @click="selectyear(3)">35以上</view>
				</view>
				<view class="item">
					<view class="name">认证</view>
					<view :class="'select '+ (renzheng.index==0?'active':'')" @click="selectrenzheng(0)">不限</view>
					<view :class="'select '+ (renzheng.index==1?'active':'')" @click="selectrenzheng(1)">身份证</view>
					<view :class="'select '+ (renzheng.index==2?'active':'')" @click="selectrenzheng(2)">毕业证</view>
					<view :class="'select '+ (renzheng.index==3?'active':'')" @click="selectrenzheng(3)">从业证</view>
				</view>
				<view class="item">
					<view class="name">距离</view>
					<view :class="'select '+ (disa.index==0?'active':'')" @click="selectdisa(0)">不限</view>
					<view :class="'select '+ (disa.index==1?'active':'')" @click="selectdisa(1)">5公里内</view>
					<view :class="'select '+ (disa.index==2?'active':'')" @click="selectdisa(2)">10公里内</view>
				</view>
				<view class="item">
					<view class="name">媒体</view>
					<view :class="'select '+ (meiti.index==0?'active':'')" @click="selectmeiti(0)">不限</view>
					<view :class="'select '+ (meiti.index==1?'active':'')" @click="selectmeiti(1)">视频</view>
					<view :class="'select '+ (meiti.index==2?'active':'')" @click="selectmeiti(2)">语音</view>
					<view :class="'select '+ (meiti.index==3?'active':'')" @click="selectmeiti(3)">照片</view>
				</view>
			</view>
			<view style="background:rgb(244, 244, 244) ;height: 100rpx; display:flex;padding-top:18rpx ;">
				<view
					style="width: 290rpx;height: 60rpx;line-height: 60rpx;text-align: center; background: #fff;border-radius: 30rpx;margin-left:65rpx ;"
					@click="onChongzhi(0)">重置</view>
				<view
					style="width: 290rpx;height: 60rpx;line-height: 60rpx;text-align: center; background: rgb(0, 190, 76);border-radius: 30rpx;margin-left:25rpx ;color: #fff;"
					@click="onOk">确定</view>
			</view>
		</view>

		<view v-for="(item,index) in list" :key="index" class="userinfo first" @click="ondetail(item)">
			<view style="margin-top: 24rpx;margin-left: 10rpx;">
				<image style="width:100rpx;height: 100rpx;" :src="item.icon??'/static/img/tx.png'"></image>
			</view>
			<view class="userinfo-right">
				<view class="userinfo-1">
					<view class="userinfo-2">
						<view class="userinfo-name">
							{{item.realName}}
						</view>
						<view class="userinfo-level">
							L{{item.vip??''}}
						</view>
						<view class="userinfo-tuijian">
							推荐
						</view>
						<view class="userinfo-xin">
							<up-rate readonly size="12" gutter="1" v-model="item.xing" active-color="#faca06"
								inactive-color="#b2b2b2"></up-rate>
						</view>
					</view>
					<view class="userinfo-year">
						从业{{item.work}}年
					</view>
				</view>
				<view style="display: flex;margin-top: 12rpx;">
					<view class="userinfo-21" style="width: 106rpx;">
						<view style="display: none;">¥50/时</view>
					</view>
					<view class="userinfo-22">
						<image style="height: 26rpx;width: 26rpx;margin: 0 4rpx 0 4rpx;"
							src="/static/images/index/sex.png"></image>
						{{item.birthday}}
					</view>
					<view class="userinfo-23">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/3.png"></image>
					</view>
					<view class="userinfo-24">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/4.png"></image>
					</view>
					<view class="userinfo-25">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/5.png"></image>
					</view>
					<view class="userinfo-26">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/6.png"></image>
					</view>
					<view class="userinfo-27">
						距离{{item.distance}}
					</view>
				</view>
				<view style="userinfo-28">
					{{item.advantage}}
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		useStore
	} from '@/store/index.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import {
		categoryHomeApi,
		serviceHomeApi,
		categoryServerList
	} from '@/api/service'
	import baseURL from '@/config/config'
	export default {

		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				list: [],
				silde: [{
					id: 0,
					image: '/static/images/icon1.png',
					name: "语文1",
				}, ],
				goodDetailModalVisible: false,
				node: "",
				swiperCurrent: 0,
				title: "",
				id: 0,
				search_index: 0,
				topicStatu: false,
				sex: {
					index: 0
				},
				year: {
					index: 0
				},
				renzheng: {
					index: 0
				},
				disa: {
					index: 0
				},
				meiti: {
					index: 0
				},
				id: '',
				cid: "",
				title: '',
			})
			onLoad((option) => {
				console.log(option);
				state.id = option.id;
				state.title = option.name;
				uni.setNavigationBarTitle({
					title: state.title,
				})
				getData();
				onServer(state.id);
			})

			const getData = async () => {
				const {
					data
				} = await categoryHomeApi({
					parentId: state.id
				})
				var tmp = [];
				data.forEach(im => {
					if (im.parentId == state.id) {
						if (im.icon == 'null') im.icon = '';
						if (im.icon == null) im.icon = '';
						if (im.icon != '') im.icon = baseURL.imgURL + im.icon;
						tmp.push(im);
					}
				});
				tmp.sort((a, b) => a.id - b.id);
				state.silde = tmp;
			}
			const ondetail = (item) => {
				uni.navigateTo({
					url: `/subpages/cateinfo/detail?uid=${item.uid}&id=${item.id}`
				})
			}
			const onServer = async (item) => {
				const {
					data
				} = await categoryServerList({
					categoryId: item,
					type: 0,
					latitude: 0,
					longitude: 0,
				})
				state.cid = item;
				data.records.forEach(im => {
					im.realName = im.userName;
					if (im.avatar == null) im.avatar = '';
					if (im.avatar == 'null') im.avatar = '';
					if (im.distance == null) im.distance = '--';
					if (im.distance == 'null') im.distance = '--';
					im.distance += "";
					if (im.distance.length > 5) im.distance = im.distance.substring(0, 5);
					if(im.xing==null)im.xing = 5;
					//workAt
					im.work = toage(im.workAt);
					im.birthday = toage(im.birthday);
				});
				state.list = data.records;
				// state.search_index  = 0;
			}
			const onsearch = async (item) => {
				const {
					data
				} = await categoryServerList({
					categoryId: state.cid || state.id,
					type: item,
					latitude: 0,
					longitude: 0,
				})
				data.records.forEach(im => {
					im.realName = im.userName;
					if (im.avatar == null) im.avatar = '';
					if (im.avatar == 'null') im.avatar = '';
					if (im.distance == null) im.distance = '--';
					if (im.distance == 'null') im.distance = '--';
					im.distance += "";
					if (im.distance.length > 5) im.distance = im.distance.substring(0, 5);
					if(im.xing==null)im.xing = 5;
					//workAt
					im.work = toage(im.workAt);
					im.birthday = toage(im.birthday);
				});
				state.list = data.records;
				state.search_index = item;
				state.topicStatu = false;
			}
			const onsearch2 = async (item) => {
				state.search_index = 3;
				state.topicStatu = true;
			}
			const moveHandle = async () => {
				state.topicStatu = false;
			}
			const onChongzhi = async () => {
				// state.topicStatu = false;
				state.sex = {
					index: 0
				}
				state.year = {
					index: 0
				}
				state.renzheng = {
					index: 0
				}
				state.disa = {
					index: 0
				}
				state.meiti = {
					index: 0
				}
			}
			const onOk = async () => {
				state.topicStatu = false;
				var sex=2;
				if(state.sex.index==1)sex = 1;
				if(state.sex.index==2)sex = 0;
				var year=3;
				if(state.year.index==0)year = 3;
				else year = state.year.index-1;
				var renzheng = 3;
				if(state.renzheng.index==0)renzheng = 3;
				else renzheng = state.renzheng.index-1;
				var disa = 2;
				if(state.disa.index==0)disa = 2;
				else disa = state.disa.index-1;
				var meiti = 3;
				if(state.meiti.index==0)meiti = 3;
				else meiti = state.meiti.index-1;
				const {
					data
				} = await categoryServerList({
					categoryId: state.cid || state.id,
					type: 3,
					latitude: 0,
					longitude: 0,
					sex:sex,
					age:year,
					verified:renzheng,
					distance:disa,
					media:meiti,
				})
				data.records.forEach(im => {
					im.realName = im.userName;
					if (im.avatar == null) im.avatar = '';
					if (im.avatar == 'null') im.avatar = '';
					if (im.distance == null) im.distance = '--';
					if (im.distance == 'null') im.distance = '--';
					im.distance += "";
					if (im.distance.length > 5) im.distance = im.distance.substring(0, 5);
					if(im.xing==null)im.xing = 5;
					//workAt
					im.work = toage(im.workAt);
					im.birthday = toage(im.birthday);
				});
				state.list = data.records;
			}
			const toage = (birthday) => {
				if (birthday == null || birthday == '') return '--';
				try {
					var birthDate = new Date(birthday);
					var today = new Date();
					var age = today.getFullYear() - birthDate.getFullYear();

					// 检查是否已过今年的生日  
					var m = today.getMonth() - birthDate.getMonth();
					if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
						age--;
					}
					return age;
				} catch {
					return '--'
				}
			}
			const selectsex = (e) => {
				state.sex.index = e;
			}
			const selectyear = (e) => {
				state.year.index = e;
			}
			const selectrenzheng = (e) => {
				state.renzheng.index = e;
			}
			const selectdisa = (e) => {
				state.disa.index = e;
			}
			const selectmeiti = (e) => {
				state.meiti.index = e;
			}
			return {
				...toRefs(state),
				ondetail,
				onServer,
				onsearch,
				onsearch2,
				moveHandle,
				onChongzhi,
				onOk,
				selectsex,
				selectyear,
				selectrenzheng,
				selectdisa,
				selectmeiti,
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */
	.container {
		min-height: 100%;
		background: rgb(244, 244, 244);
	}

	.header {
		width: 750rpx;
		height: 410rpx;
		background-size: 100% 100%;
		background-image: url(/static/images/index/bj.png);
	}

	.title {
		display: flex;
		flex-direction: row;
		align-items: center;
		// justify-content: space-between;
		margin: 0 40rpx 40rpx 40rpx;
		color: #fff;
	}


	.banner {
		position: relative;
		width: 100%;
		// height: 600rpx;

		.bg {
			width: 100%;
			height: 600rpx;
		}

	}

	.userinfo {
		display: flex;
		height: 175rpx;
		margin: 4rpx 10rpx 0 10rpx;
		background-color: #fff;
		font-size: 28rpx;
	}

	.first {
		margin-top: 6rpx;
		border-radius: 8rpx 8rpx 0 0;
	}

	.userinfo-right {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.userinfo-1 {
		display: flex;
		justify-content: space-between;
	}

	.userinfo-2 {
		display: flex;
	}

	.userinfo-name {
		font-size: 30rpx;
	}

	.userinfo-level {
		font-size: 28rpx;
		margin-left: 5rpx;
		width: 80rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 8rpx;
		background-color: rgb(255, 195, 13);
		text-align: center;
		color: #fff;
	}

	.userinfo-tuijian {
		font-size: 28rpx;
		margin-left: 5rpx;
		width: 80rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 8rpx;
		background-color: rgb(255, 59, 64);
		text-align: center;
		color: #fff;
	}

	.userinfo-xin {
		margin-left: 5rpx;
		margin-top: 10rpx;
	}

	.userinfo-year {
		color: rgb(182, 182, 182);
		margin-right: 5rpx;
	}

	.userinfo-21 {
		font-size: 28rpx;
		color: rgb(13, 181, 86);
	}

	.userinfo-22 {
		border: 2rpx solid rgb(251, 115, 161);
		border-radius: 8rpx;
		color: rgb(251, 115, 161);
		margin-left: 20rpx;
		width: 80rpx;
		display: flex;
		align-items: center;
	}

	.userinfo-23 {
		margin-left: 10rpx;
	}

	.userinfo-24 {
		margin-left: 10rpx;
	}

	.userinfo-25 {
		margin-left: 10rpx;
	}

	.userinfo-26 {
		margin-left: 10rpx;
	}

	.userinfo-27 {
		margin-left: 40rpx;
		color: rgb(185, 185, 185);
	}

	.userinfo-28 {
		margin-top: 12rpx;
		color: rgb(140, 140, 140);
	}

	.navscroll {
		white-space: nowrap;
		height: 160rpx;
		background: #fff;
		margin-bottom: 4rpx;

		::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}

		.item {
			margin-top: 23rpx;
			font-size: 36rpx; // 设置字体大小
			width: 150rpx;
			display: inline-block; // 设置为行内块
			padding: 0 23rpx; // 设置外边距
			color: #333; // 设置颜色		
		}
	}

	.search {
		background: #fff;
		font-size: 30rpx;
		height: 72rpx;
		line-height: 72rpx;
		display: flex;
		padding-left: 40rpx;
		margin-bottom: 2rpx;

		.search-item {
			width: 180rpx;
		}

		.active {
			color: rgb(0, 188, 81);
		}
	}

	.panelMask {
		z-index: 1000;
		position: fixed;
		left: 0;
		right: 0;
		top: 0rpx;
		bottom: 0;
		height: 200vh;
		background: rgba(0, 0, 0, 0.5);
	}

	.condition-panel {
		z-index: 1001;
		/* padding: 20rpx 60rpx; */
		/* height: 60%; */
		position: fixed;
		top: 0rpx;
		left: 0;
		right: 0;
		overflow: auto;
		background-color: #FFFFFF;

		.filter {
			background: #fff;
			height: 368rpx;
			padding-left: 40rpx;

			.item {
				height: 50rpx;
				line-height: 50rpx;
				display: flex;
				margin-top: 20rpx;
				font-size: 26rpx;

				.name {
					font-weight: 600;
					width: 75rpx;
				}

				.select {
					margin: 0 15rpx 0 15rpx;
					padding: 0 20rpx 0 20rpx;
					border-radius: 30rpx;
					color: rgb(115, 115, 115);
					border: 1px solid rgb(115, 115, 115);
				}

				.active {
					color: rgb(0, 191, 77);
					border: 1px solid rgb(0, 191, 77);
				}
			}
		}
	}
</style>